<script setup lang="ts">
import { ref } from 'vue'
const list = ref([
    {
        title: '库存管理',
        context: '对仓库内货物的数量、批次、状态等进行监控与调控，平衡供需关系。'
    },
    {
        title: '库存安全管理',
        context: '通过防火、防盗、防潮等措施，确保人员与货物的安全。'
    },
    {
        title: '运输跟踪与监控',
        context: '通过 GPS 等技术实时掌握货物位置、状态，及时应对异常情况。'
    },
    {
        title: '运输成本控制',
        context: '通过优化路线、整合运力等方式，降低运输过程中的各项开支。'
    }
])
</script>
<template>
    <div class="gap-[16px] h-[840px]">
        <div class="h-2/9 flex items-center justify-center">
            <div v-for="(item, index) in list" :key="index" class="zsd-bg w-1/4 h-full flex flex-col justify-around px-[26px] pt-[14px] pb-[24px]">
                <div class="text-[#0973CA] text-[20px] font-[700]">{{ item.title }}</div>
                <div class="text-[#666666] text-[14px]">{{ item.context }}</div>
                <div style="background: linear-gradient(270deg, #2C91EB 0%, #0973CA 100%);" class="w-[80px] h-[32px] text-[#FFF] text-[16px] rounded-[4px] flex items-center justify-center">
                    去查看
                </div>
            </div>
        </div>
        <div class="h-7/9 flex">
            <div class="w-3/5 h-full zsd-china"></div>
            <div class="w-2/5 flex flex-col justify-center items-start pl-[100px]">
                <div class="flex">
                    <div class="w-[4px] h-[80px]" style="background: linear-gradient(0deg, #2C91EB 0%, #0973CA 100%);"></div>
                    <div class="ml-[14px]">
                        <h4 class="font-[600]">累计订单</h4>
                        <div class="flex items-end">
                            <div class="text-[32px] text-[#0973CA] font-[700]">1456</div>
                            <div class="ml-[4px] mb-[6px] font-[500]">万</div>
                        </div>
                    </div>
                </div>
                <div class="flex mt-[60px]">
                    <div class="w-[4px] h-[80px]" style="background: linear-gradient(0deg, #2C91EB 0%, #0973CA 100%);"></div>
                    <div class="ml-[14px]">
                        <h4 class="font-[600]">已完成</h4>
                        <div class="flex items-end">
                            <div class="text-[32px] text-[#0973CA] font-[700]">256</div>
                            <div class="ml-[4px] mb-[6px] font-[500]">万</div>
                        </div>
                    </div>
                </div>
                <div class="flex mt-[60px]">
                    <div class="w-[4px] h-[80px]" style="background: linear-gradient(0deg, #2C91EB 0%, #0973CA 100%);"></div>
                    <div class="ml-[14px]">
                        <h4 class="font-[600]">履约中</h4>
                        <div class="flex items-end">
                            <div class="text-[32px] text-[#0973CA] font-[700]">53</div>
                            <div class="ml-[4px] mb-[6px] font-[500]">万</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.zsd-bg {
    background-image: url('../assets/image/zsd-bg.png');
    background-size: 100% 100%;
}
.zsd-china {
    background-image: url('../assets/image/zsd-china.png');
    background-size: 100% 100%;
}
</style>
